import logo from './logo.svg';
import './App.css';
import React,{Component} from 'react';

import Header from './components/Header';
import List from './components/List';
import Footer from './components/Footer';

export default class App extends Component {
    //状态初始化
   state = {
        todos:[
                    {id:'001',name:'吃饭',done:true},
                    {id:'002',name:'工作',done:true},
                    {id:'003',name:'代码',done:false},
                    {id:'004',name:'睡觉',done:false},
        ]
    }
    // 用于添加一个todo对象
    headerData = (addData)=>{
       //获取原数据
        const {todos} =this.state;
        //新的数据数组
        const newTodos = [addData,...todos]
        this.setState({todos:newTodos})
        console.log('APP',addData);
    }

    changeTodo=(id,done)=>{
       const {todos}=this.state
        const newTodos = todos.map((item)=>{
            if(item.id===id) return {...item,done:done}
            else return item

        })
        this.setState({todos:newTodos})
}

//删除一个todo对象
    deleteTodo=()=>{
       const {todos}=this.state
        //删除指定的todo对象
        todos.filter((todoObj)=>{
            return todoObj.id !==id
        })
        //更新状态
        this.setState({todos:this.newTodos})
    }
//全选
    checkAllTodo =(done)=>{
       const {todos} = this.state
        const newTodos=todos.map((item)=>{
            return {...item,done}
        })
        this.setState({todos:newTodos})
    }
//清除
    clearAllDone=()=>{
       const {todos}=this.state
        const newTodos=todos.filter((item)=>{
            return !item.done
        })
        this.setState({todos:newTodos})
    }

    render() {
       const {todos} = this.state;
        return (
            <div className="to-container">
                <div className="todo-wrap">
                    <Header headerData={this.headerData}/>
                    <List todos={todos} changeTodo={this.changeTodo} deleteTodo={this.deleteTodo}/>
                    <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
                </div>
            </div>
        )
    }
}

//类
// class App extends React.Component{
//   render(){
//     return (
//         <div>
//           hello,React!
//         </div>
//     )
//   }
// }
// export default App;
